<template>
  <el-button class="w-80 absolute top-5 left-6" type="success" @click="router.push('/')">BACK</el-button>
  <el-card>
    <div class="grid grid-cols-4 gap-6">
      <router-link v-for="item in routeList?.children" :to="item!.path" :key="item.path">
        <el-button class="w-80" type="primary"
          @click="(dialogVisible = true) && (title = item.component?.name || item.name)">{{
            item.component?.name || item.name
          }}</el-button>
      </router-link>
    </div>
    <el-dialog top="0" destroy-on-close center fullscreen v-model="dialogVisible" :title="title?.toString()"
      :before-close="handleClose">
      <el-button @click="back" type="success" class="absolute top-5 left-6">back</el-button>
      <el-card class="w-full h-full text-center pb-5 scroll">
        <router-view />
      </el-card>
    </el-dialog>
  </el-card>
</template>
<script setup lang="ts">
import { RouteRecordRaw, RouteRecordName } from 'vue-router';
import { storage } from '@/utils/storage';

const { routes } = useRouter().options;
const routeList = ref<RouteRecordRaw>();
routes.forEach((item) => {
  if (item.name === 'Test') routeList.value = item;
});
const title = ref<RouteRecordName | undefined>("")
const router = useRouter();
const dialogVisible = ref(false);
const handleClose = (done: () => void) => {
  done();
  router.push('/test');
};
const back = () => {
  dialogVisible.value = false;
  router.push('/test');
};
dialogVisible.value =
  (storage.get('ISSUBCOMPONENT') === true && useRoute().path !== '/test') ||
  false;
watchEffect(() => {
  storage.set('ISSUBCOMPONENT', dialogVisible.value);
});
onBeforeMount(() => {
  storage.remove('ISSUBCOMPONENT');
});
watch(
  () => router.currentRoute.value,
  () => {
    if (router.currentRoute.value.path === '/test') dialogVisible.value = false;
  }
);
</script>
